<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
  <title>AI情绪魔镜</title>
  <link rel="stylesheet" href="style.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
</head>
<body>
  <div id="app">
    <!-- 顶部导航 -->
    <header>
      <h1>AI情绪魔镜</h1>
    </header>
    <!-- 主体内容 -->
    <main id="home-page">
      <!-- 顶部用户信息区域 -->
      <section class="top-user-section">
        <div class="avatar">
          <i class="fas fa-user-circle"></i> <!-- 占位头像图标 -->
        </div>
        <p class="username">微信用户</p>
        <h2 class="feeling-prompt">今天感觉如何?</h2>
      </section>

      <!-- 实时情绪状态 - 与架构图一致 -->
      <section class="card emotion-status-card">
        <h3>实时情绪状态</h3>
        <div class="status-display">
          <div class="emotion-emoji">😊</div> <!-- 占位表情 -->
          <div class="emotion-text">平静</div> <!-- 占位情绪文字 -->
        </div>
        <div class="emotion-intensity">
          <span>情绪强度</span>
          <div class="progress-bar-container">
            <div class="progress-bar" style="width: 50%;"></div> <!-- 占位进度条 -->
          </div>
          <span>50%</span>
        </div>
      </section>

      <!-- 虚拟形象互动 - 与架构图一致 -->
      <section class="virtual-avatar-section">
        <h3>虚拟形象互动</h3> <!-- 标题恢复为"虚拟形象互动" -->
        <div class="interaction-cards-container">
          <div class="interaction-card">
            <!-- <img src="placeholder-robot.png" alt="3D虚拟形象互动"> --> <!-- 占位图片 -->
            <i class="fas fa-users"></i> <!-- 互动图标 -->
            <h4>3D虚拟形象互动</h4>
            <p>与伙伴实时交流</p>
            <button onclick="alert('进入3D虚拟形象互动')">进入</button> <!-- 添加进入按钮 -->
          </div>
          <!-- 新增数字人生成卡片 -->
          <div class="interaction-card">
            <i class="fas fa-camera-retro"></i> <!-- 图标 -->
            <h4>数字人生成</h4>
            <p>上传照片生成您的专属数字人</p>
            <input type="file" accept="image/*" id="avatar-photo-upload" style="display: none;">
            <button onclick="document.getElementById('avatar-photo-upload').click()">上传照片</button>
            <img id="photo-preview" src="#" alt="照片预览" style="display: none; max-width: 100%; margin-top: 10px;">
          </div>
        </div>
      </section>

       <!-- 快速干预入口 - 添加快速入口图标按钮 -->
       <section class="quick-intervention-section">
           <h3>快捷干预</h3> <!-- 标题改为"快捷干预" -->
           <div class="quick-links">
               <button onclick="alert('快速放松')"><i class="fas fa-leaf"></i><span>放松</span></button>
               <button onclick="alert('快速音乐')"><i class="fas fa-music"></i><span>音乐</span></button>
               <button onclick="alert('快速呼吸')"><i class="fas fa-lungs"></i><span>呼吸</span></button>
                <button onclick="alert('快速冥想')"><i class="fas fa-brain"></i><span>冥想</span></button>
           </div>
       </section>

    </main>
    <!-- 底部导航 -->
    <footer>
      <nav>
        <button class="active" onclick="window.location.href='index.html'">
          <i class="fas fa-home"></i>
          <span>首页</span>
        </button>
        <button onclick="window.location.href='recognition.html'">
          <i class="fas fa-brain"></i> <!-- 识别中心图标 (示例) -->
          <span>识别中心</span>
        </button>
        <button onclick="window.location.href='intervention.html'">
          <i class="fas fa-hand-holding-heart"></i> <!-- 干预工坊图标 (示例) -->
          <span>干预工坊</span>
        </button>
        <button onclick="window.location.href='growth.html'">
          <i class="fas fa-chart-line"></i> <!-- 成长中心图标 (示例) -->
          <span>成长中心</span>
        </button>
        <button onclick="window.location.href='my.html'">
          <i class="fas fa-user"></i>
          <span>我的</span>
        </button>
      </nav>
    </footer>
  </div>
  <script src="main.js"></script>
</body>
</html> 